<template>
  <div class="baseWangEditor">
    <div style="border: 1px solid #ccc">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="props.toolbarConfig"
          :mode="mode"
      />
      <Editor
          class="operateEditor"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
          @onChange="handleChange"
      />
    </div>
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import Cookies from "js-cookie";
import {nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch} from "vue";
const csrftoken = Cookies.get('csrftoken')
import { DomEditor } from '@wangeditor/editor'

const props = defineProps({
  // 工具栏 排除 全屏
  toolbarConfig: {
    type: [Object, Array],
    default() {
      return {
        excludeKeys: ["fullScreen"],
      }
    }
  },
  modelValue: {
    type: String,
    default(){
      return ""
    }
  }
})
const emits = defineEmits(['handleChange'])
let valueHtml = ref('')

let mode = ref('default')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    // 配置默认字号
    // 配置上传图片
    uploadImage: {
      // 请求路径
      server: "/proxy-api/uploadFile",
      // 后端接收的文件名称
      fieldName: "img",
      maxFileSize: 100 * 1024 * 1024, // 100M
      // 上传的图片类型
      allowedFileTypes: ["image/*"],
      // 小于该值就插入 base64 格式（而不上传），默认为 0 不写参数就会使用上传方式
      base64LimitSize: 100 * 1024 * 1024, // 100MB
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      // 自定义增加 http  header
      headers: {
        'Authorization': "Bearer " + csrftoken
      },
      // 自定义上传
      customUpload: async (file, insertFn) => {
      },
      // 上传之前触发
      onBeforeUpload(file) {
        return file
      },
      // 上传进度的回调函数
      onProgress(progress) {
      },
      // 单个文件上传成功之后
      onSuccess(file, res) {// JS 语法
        console.log(`${file.name} 上传成功`, res)
      },
      // 单个文件上传失败
      onFailed(file, res) {// JS 语法
        console.log(`${file.name} 上传失败`, res)
      },
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {// JS 语法
        console.log(`${file.name} 上传出错`, err, res)
      },
    }
  }
}


const handleChange = (editor) => {
  let getHtml = editor.getHtml()
  emits('handleChange',getHtml, editor)
}
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  nextTick(() => {

  })
}

onMounted(() => {
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

watch(()=> props.modelValue, (v) => {
  valueHtml.value = v
}, {immediate: true})

defineExpose({
  editorRef
})
</script>

<style scoped lang="less">
.baseWangEditor {

}
.wangEditor {

}
.operateEditor {
  //height: 340px !important; // 外部设置
}
:deep(.w-e-text-container) {
  padding: 10px 0;
  p {
    margin: 0;
  }
  .w-e-bar {
    .w-e-bar-item {
      .w-e-select-list {
        ul {
          position: fixed;
          background-color: #fff;

          li {
            padding: 2px 25px 2px 25px;
          }
        }
      }
    }
  }
}
</style>